import React, { memo } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { changeCurrentAreaAction, changeCurrentTypeAction } from "../../store/actionCreators";
import { artistCategories } from "@/common/local-data";

import { ArtistCategoryWrapper, CategoryItem } from "./style";

const ArtistCategory = memo(() => {
  const {currentArea, currentType} = useSelector(state => ({
    currentArea: state.getIn(["artist", "currentArea"]),
    currentType: state.getIn(["artist", "currentType"])
  }), shallowEqual);
  const dispatch = useDispatch();
  
  //选中分类改变redux
  function selectArtist(area, type) {
    dispatch(changeCurrentAreaAction(area));
    dispatch(changeCurrentTypeAction(type));
  };

  //渲染子分类
  function renderArtists(artists, area) {
    return (
      <div>
        {
          artists.map(iten => {
            let clN = currentType.type === iten.type && currentArea === area ? "active" : "";
            
            return (
              <CategoryItem 
                key={iten.name}
                className={clN}
              >
                <span className="link" onClick={e => selectArtist(area, iten)}>{iten.name}</span>
              </CategoryItem>
            )
          })
        }
      </div>
    )
  };
  
  return (
    <ArtistCategoryWrapper>
      {
        artistCategories.map(item => {
          return (
            <div className="selection" key={item.area}>
              <h2 className="title">{item.title}</h2>
              { renderArtists(item.artists, item.area) }
            </div>
          )
        })    
      }
    </ArtistCategoryWrapper>
  )
})

export default ArtistCategory;